<template>
  <div>
    <div class='table-top'>
      <slot name="top-content" />
    </div>
    <a-table :scroll="{ y: 300}" v-if="defaultTable" :dataSource="data.records" :columns="columns" bordered :pagination="false">
      <slot name="extands"></slot>
    </a-table>
    <slot v-else name="table-conten"/>
    <div class="table-page">
      <a-pagination
      size="small"
      @showSizeChange="sizeChange"
      @change="sizeChange"
      :total="data.total"
      showSizeChanger
      showQuickJumper
      :showTotal="total => `总计 ${total} 条`"
    />
  </div>
  </div>
</template>

<script>
export default {
  props: {
    defaultTable:{
      type:Boolean,
      default:true
    },
    columns: {
      type: Array,
      default: function() {
        return [];
      }
    },
    data: {
      type: Object,
      default: function() {
        return {records:[]};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    sizeChange(current,size){
      this.$emit('sizeChange',current,size)
    }
  }
};
</script>

<style>
.table-top{
    display: flex;
    align-items: center;
}
.table-page{
    padding: 5px 0;
}
</style>